<script setup>
  import { ref } from 'vue'
  import shortCut from '@/components/common/shortCut.vue'
  import headerPage from '@/components/common/headerPage.vue'
  import footerPage from '@/components/common/footerPage.vue'
  import navPage from './components/navPage.vue'
  import freshgoodsdetailPage from './components/freshgoodsdetailPage.vue'

  // 冷链食品数据 - 使用实际存在的图片文件
  const coldChainGoods = ref([
    {
      name: '冷冻海鲜拼盘',
      image: 'shucai1.jpg',
      price: 168.00,
      unit: '/份'
    },
    {
      name: '澳洲进口牛肉',
      image: 'shucai2.jpg',
      price: 138.00,
      unit: '/斤'
    },
    {
      name: '新西兰青口贝',
      image: 'shucai3.jpg',
      price: 58.00,
      unit: '/袋'
    },
    {
      name: '阿拉斯加雪蟹',
      image: 'shucai4.jpg',
      price: 258.00,
      unit: '/只'
    },
    {
      name: '挪威北极虾',
      image: 'shucai5.jpg',
      price: 88.00,
      unit: '/盒'
    },
    {
      name: '阿根廷鱿鱼',
      image: 'shucai6.jpg',
      price: 68.00,
      unit: '/条'
    },
    {
      name: '日本三文鱼切片',
      image: 'shucai7.jpg',
      price: 98.00,
      unit: '/份'
    },
    {
      name: '加拿大象拔蚌',
      image: 'shucai8.jpg',
      price: 288.00,
      unit: '/只'
    }
  ])
</script>
<template>
  <div>
    <!-- 快捷导航 -->
    <shortCut></shortCut>
    <!-- 头部 -->
    <headerPage></headerPage>
    <!-- 导航栏 -->
    <navPage></navPage>
    <!-- 内容 - 通过props传递数据给组件 -->
    <freshgoodsdetailPage
      :goods="coldChainGoods"
      title="新鲜水果"
      imageBasePath="/shengxian/"
    ></freshgoodsdetailPage>
    <!-- 底部 -->
    <footerPage></footerPage>
  </div>
</template>
